﻿@page
@model Classroom.Areas.Identity.Pages.Account.RegisterModel
@inject RoleManager<IdentityRole> _rolemanager
@section MainStyle{


    <!-- bradcam_area_start -->
    <div class="bradcam_area breadcam_bg overlay2">
        <h3>Register</h3>
    </div>
    <!-- bradcam_area_end -->

}
<div class="mb-5 mt-5 row">
    <form id="account" enctype="multipart/form-data" asp-route-returnUrl="@Model.ReturnUrl" method="post" style="margin:auto">
        <div class="popup_box ">
            <div class="popup_inner">
                <div class="logo text-center">
                    <a href="#">
                        <img src="img/form-logo.png" alt="">
                    </a>
                </div>
                <h3>Register</h3>

                <div class="row">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="col-xl-12 col-md-12">
                        <input asp-for="Input.Email" placeholder="Enter email">
                    </div>
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                    <div class="col-xl-12 col-md-12">
                        <input asp-for="Input.Password" placeholder="Password">
                    </div>

                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                    <div class="col-xl-12 col-md-12">
                        <input asp-for="Input.ConfirmPassword" placeholder="ConfirmPassword">
                    </div>

                    <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
                    <div class="col-xl-12 col-md-12 mb-3">
                        <select asp-for="Input.RoleId" class="form-control">
                            <option selected>Select Role...</option>
                            @foreach (var item in _rolemanager.Roles)
                            {
                                <option value="@item.Id"> @item.Name</option>
                            }

                        </select>
                    </div>
                    <span asp-validation-for="Input.RoleId" class="text-danger"></span>
                    <div class="col-xl-12 col-md-12 mb-3">
                        <div class="custom-file">
                            <input asp-for="Input.Image" id="image" style="display:none"/>
                            <input id="customFile" type="file" accept="image/*" onchange="handleInputChange(event)"  class="form-control custom-file-input" />
                            <label class="custom-file-label">Choose Image..</label>
                        </div>
                    </div>
                    <div style="display:none" id="ImageContainer">
                        <div class="col-xl-12 col-md-12 mb-3">
                            <img style="max-width: 250px;"  class="img img-responsive" id="imageViewer" />
                        </div>
                    </div>

                    <div class="col-xl-12">
                        <button type="submit" class="boxed_btn_orange">Sign Up</button>
                    </div>
                </div>

                <p class="doen_have_acc">
                    Do have an account? <a class="dont-hav-acc" asp-area="Identity" asp-page="/Account/Login">Sign In</a>
                </p>
            </div>
        </div><button title="Close (Esc)" type="button" class="mfp-close">×</button>
    </form>
</div>


@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script src="~/js/UploadImage.js"></script>
    <script>
        function handleInputChange(imageInput) {
            const file = imageInput.dataTransfer ? imageInput.dataTransfer.files[0] : imageInput.target.files[0];
            const reader = new FileReader();
            reader.onload = this._handleReaderLoaded.bind(this);
            reader.readAsDataURL(file);
        }
        function _handleReaderLoaded(e) {
            const reader = e.target;
            $("#ImageContainer").css("display", "block");
            $("#image").val(reader.result);
            $("#imageViewer").attr("src", reader.result);
        }
    </script>
}
